<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm"  :inline="true">
      <el-form-item label="年度">
        <el-date-picker v-model="queryParams.startTime" value-format="yyyy" type="year" placeholder="开始年度"  @change="handleStartYearChange"></el-date-picker>
        <span style="margin: 0 10px">至</span>
        <el-date-picker v-model="queryParams.endTime" value-format="yyyy" type="year" placeholder="结束年度" :min-date="queryParams.startTime" @change="handleEndYearChange"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-s-data"  @click="count">统计</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8" ref="refbut">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-download"  @click="exportExcel">导出</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-printer"  @click="print">打印</el-button>
      </el-col>
    </el-row>

    <div style="width: 70%; margin: 0 auto;">
      <table class="custom-table">
        <thead>
          <tr class="title">
            <th colspan="5" style="border: 0 !important;">
              <h1 style="font-size: 28px;" class="h1">
                档案门类统计表
              </h1>
            </th>
          </tr>
          <tr class="dates">
            <th colspan="5" style="border: 0 !important;">
              <h3 style="font-size: 20px;" class="h3">
                {{ dates }}
              </h3>
            </th>
          </tr>
          <tr>
            <th colspan="5">
              档案类型数量总表
            </th>
          </tr>
        <tr>
          <th rowspan="2">档案类型</th>
          <th colspan="2">案卷</th>
          <th>以件归档</th>
          <th rowspan="2">电子文件</th>
        </tr>
        <tr>
          <th>案卷级目录数</th>
          <th>卷内件目录数(条)</th>
          <th>文件目录数(条)</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, index) in tableData" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.juanNum }}</td>
          <td>{{ item.juanneijian }}</td>
          <td>{{ item.jianNum }}</td>
          <td>{{ item.docNum }}</td>
        </tr>
        </tbody>
      </table>
    </div>

    <div style="width: 70%; height: 300px; margin: 0 auto; margin-top: 3%">
      <div id="histogram" style="width: 90%; height:100%;"></div>
    </div>
  </div>
</template>

<script>
import {menlei} from "@/api/archive/statistics/categoryStatistics/categoryStatistics";
import * as XLSX from "xlsx";
import * as echarts from "echarts";

export default {
  name: "index",
  data() {
    return {
      queryParams: {
        startTime: undefined,
        endTime: undefined
      },
      date: "",
      dates: "",
      // 统计表格数据
      tableData: [],
    }
  },
  created() {
    const now = new Date();
    const currentYear = now.getFullYear();
    // this.time = currentYear

    const currentMonth = String(now.getMonth() + 1).padStart(2, '0');
    const currentDate = String(now.getDate()).padStart(2, '0');
    this.date = currentYear + "年" + currentMonth + "月" + currentDate + "日"
    this.getList()
  },
  methods: {
    handleStartYearChange() {
  
      if(this.queryParams.endTime==null){
       
        this.queryParams.endTime=undefined;
      }
 
      if(this.queryParams.endTime < this.queryParams.startTime) {
        this.queryParams.startTime = this.queryParams.endTime;
      }
    },
    handleEndYearChange() {
      if(this.queryParams.endTime < this.queryParams.startTime) {
        this.queryParams.endTime = this.queryParams.startTime;
      }
      if (!this.queryParams.startTime) {
        this.queryParams.startTime = this.queryParams.endTime;
      }
    },
    // 统计
    count() {
      this.getList()
    },
    getList() {
      this.dates = "制表日期：" + this.date
      menlei(this.queryParams).then(response=>{
        this.tableData = response.data
        this.getHistogram()
      })
    },

    // 导出
    exportExcel() {
      const worksheet = XLSX.utils.table_to_sheet(document.querySelector('.custom-table'));
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

      console.log(worksheet)
      const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
      this.saveAsExcel(excelBuffer, `门类统计_${new Date().getTime()}`);
    },

    saveAsExcel(buffer, filename) {
      const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = `${filename}.xlsx`;
      link.click();
    },
    // 打印
    print() {
      $("input").each(function () {
        $(this).attr('value', $(this).val());
      });

      const tableElement = document.querySelector('.custom-table');
      const iframe = document.createElement('iframe');
      iframe.style.display = 'none';
      document.body.appendChild(iframe);
      const iframeDoc = iframe.contentWindow.document;

      iframeDoc.open();
      iframeDoc.write(`
          <html>
          <head>
<!--            <title>打印表单</title>-->
            <style>
              @media print {
                .h1 {
                  font-size: 28px;
                  text-align: center;
                }

                .h3 {
                  font-size: 20px;
                  text-align: right;
                }

                .table {
                  margin-top: 5px;
                  padding: 1%;
                }
                .custom-table {
                  width: 100%; /* 设置表格宽度为100% */
                  margin: 0 auto;
                  border-collapse: collapse; /* 合并单元格边框 */
                }

                .custom-table th,
                .custom-table td {
                  padding: 8px; /* 设置单元格内边距 */
                  padding:5px 5px 5px 5px;
                  align-items:center;
                  justify-content:flex-start;
                  opacity:1;
                  color:#000000;
                  letter-spacing:2px;
                  font-family:仿宋;
                  font-size:16px;
                  border: 1px solid #000; /* 设置单元格边框样式 */
                  padding: 8px; /* 设置单元格内边距 */
                  text-align: center; /* 设置单元格文本居中 */
                }

                .title {
                  heigth: 5em;
                  line-height: 5em;
                  text-align: center;
                  padding:5px 5px 5px 5px;
                  align-items:center;
                  justify-content:center;
                  letter-spacing:4px;
                  font-weight:bold;
                  font-family:宋体;
                  font-size:24px;
                  opacity:1;
                  margin: 0 auto;
                  background:rgba(255, 255, 255, 0) !important;
                  border: 0 !important;
                  box-shadow:0 0 0 0 rgba(255, 255, 255, 0) !important;
                }

                .dates {
                  text-align: right;
                }
              }
            </style>
          </head>
          <body>
             ${tableElement.outerHTML}
            <script>
              window.onload = function() {
                window.print();
                window.close();
              }
            <\/script>
          </body>
          </html>
      `);
      iframeDoc.close();
    },

    // 制作柱状图
    getHistogram() {
      var Num = ['product', '案卷级目录数', '卷内件目录数', '文件目录数', '电子文件']
      var filteredArr = this.tableData.filter(obj => obj.name != "小计");
      var data = filteredArr.map(item => {
        return {
          product: item.name,
          '案卷级目录数': item.juanNum,
          '卷内件目录数': item.juanneijian,
          '文件目录数': item.jianNum,
          '电子文件': item.docNum
        }
      })
      this.$nextTick(() => {
        var myChart = echarts.init(document.getElementById('histogram'));

        // 指定图表的配置项和数据
        var option = {
          legend: {},
          tooltip: {
          },
          dataset: {
            dimensions: Num,
            source: data,
          },
          grid: {
            containLabel: true,
            top: 50,
            x: 45,
            x2: 30,
            y2: 0
          },
          xAxis: {
            type: 'category',
            boundaryGap: true,
            axisLabel: {
              interval: 0,//横轴信息全部显示
              rotate: -15,//-15度角倾斜显示
            },
          },
          yAxis: {},
          series: [
            { type: 'bar', barWidth: 20 },
            { type: 'bar', barWidth: 20 },
            { type: 'bar', barWidth: 20 },
            { type: 'bar', barWidth: 20 }
          ],
          color: ['#80b3ff', '#ffb366', '#6666ff', '#ff6600', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
        };
        // 使用配置绘制柱状图
        myChart.setOption(option);
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.h1 {
  font-size: 28px;
  text-align: center;
}

.h3 {
  font-size: 20px;
  text-align: right;
}

.table {
  margin-top: 5px;
  padding: 1%;
}
.custom-table {
  width: 100%; /* 设置表格宽度为100% */
  margin: 0 auto;
  border-collapse: collapse; /* 合并单元格边框 */
}

.custom-table th,
.custom-table td {
  padding: 8px; /* 设置单元格内边距 */
  padding:5px 5px 5px 5px;
  align-items:center;
  justify-content:flex-start;
  opacity:1;
  color:#000000;
  letter-spacing:2px;
  font-family:仿宋;
  font-size:16px;
  border: 1px solid #000; /* 设置单元格边框样式 */
  padding: 8px; /* 设置单元格内边距 */
  text-align: center; /* 设置单元格文本居中 */
}

.title {
  heigth: 5em;
  line-height: 5em;
  text-align: center;
  padding:5px 5px 5px 5px;
  align-items:center;
  justify-content:center;
  letter-spacing:4px;
  font-weight:bold;
  font-family:宋体;
  font-size:24px;
  opacity:1;
  margin: 0 auto;
  background:rgba(255, 255, 255, 0) !important;
  border: 0 !important;
  box-shadow:0 0 0 0 rgba(255, 255, 255, 0) !important;
}

.dates {
  text-align: right;
}
</style>
